<template>
	<view>
		<phone-auth 
			:show="showPhoneAuth"
			@getPhoneNumber="handleGetPhoneNumber"
			@cancel="handlePhoneAuthCancel"
		/>
		<view class="container">
			<slot></slot>
		</view>
	</view>
</template>

<script>
import PhoneAuth from './components/phone-auth/index.vue'

export default {
	components: {
		PhoneAuth
	},
	data() {
		return {
			showPhoneAuth: false,
			phoneAuthCallback: null
		}
	},
	onLaunch() {
		// 监听显示手机号授权弹框事件
		uni.$on('showPhoneAuth', (callback) => {
			this.showPhoneAuth = true
			this.phoneAuthCallback = callback
		})
	},
	methods: {
		handleGetPhoneNumber(phoneData) {
			this.showPhoneAuth = false
			if (this.phoneAuthCallback) {
				this.phoneAuthCallback.success(phoneData)
				this.phoneAuthCallback = null
			}
		},
		handlePhoneAuthCancel() {
			this.showPhoneAuth = false
			if (this.phoneAuthCallback) {
				this.phoneAuthCallback.fail()
				this.phoneAuthCallback = null
			}
		}
	}
}
</script>

<style>
	/*每个页面公共css */
	.container {
		width: 100%;
		min-height: 100vh;
	}
</style>
